<script>
//表格基本配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';

export default {
  name: 'TableBasicConfig',
  mixins: [BaseConfig],
  data() {
    return {
      borderStyles: ConfigEnum.LINE_STYLE_TYPE,
    };
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>表格背景：</span>
      </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.settings.tableStyle.backgroundColor"
        @on-change="updateOptions"
      ></ColorPicker>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>上边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.tableStyle.top"
        :min="0"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>下边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.tableStyle.bottom"
        :min="0"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>左边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.tableStyle.left"
        :min="0"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>右边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.tableStyle.right"
        :min="0"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>外边框宽度：</span>
        </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.tableStyle.borderWidth"
        :min="0"
        @on-change="updateOptions"></InputNumber>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>外边框颜色：</span>
        </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.settings.tableStyle.borderColor"
        @on-change="updateOptions"></ColorPicker>
      </Col>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>外边框线型：</span>
        </Col>
      <Col span="16">
      <Select
        v-model="chartOptions.settings.tableStyle.borderStyle"
        @on-change="updateOptions">
        <Option
          v-for="item in borderStyles"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
      </Col>
        </Col>
    </Row>
  </div>
</template>

<style>
</style>
